<template>
  <div>
    <!-- <HeaderBar/> -->
    <div class="my-themes">
      <div class="container">
        <ul class="theme-list">
          <li class="theme-item create" @click="create">
            <div class="create-area">
              <p>创建作品</p>
            </div>
          </li>
          <template v-for="(item, index) in list">
            <li class="theme-item" :key="index">
              <div class="thumb" >
                <img :src="item.img ? 'http://static.baisha.work'+item.img : picture" alt="">
                <div class="cover">
                  <div class="toolbar">
                    <Tooltip class="item" content="编辑" placement="left">
                      <Icon type="md-create" @click="toEditor(item)" />
                    </Tooltip>
                    <Tooltip class="item" content="删除" placement="left">
                      <Icon type="md-trash" @click.stop="deleteTheme(item)" />
                    </Tooltip>
                  </div>
                  <div class="preview" @click="showPreView(item)"><span>预 览</span></div>
                </div>
              </div>
              <div class="footer">
                <div class="title">内容标题：{{item.name}}</div>
                <div class="content">创建时间：{{item.ctime}}</div>
                <div class="content" style="margin-top: -7px;">更新时间：{{item.uptime}}</div>
              </div>
            </li>
          </template>
        </ul>
      </div>
    </div>
    <!-- <PreView :itemId="itemId" @hideView="isShowPreView=false" v-if="isShowPreView"/> -->
  </div>
</template>

<script>
import {
  mapActions,
  mapState
} from 'vuex'
import picture from '@/assets/images/default.png'
// import HeaderBar from '../../components/HeaderBar'
import tool from '../../libs/tool'
// import PreView from './components/preview'
export default {
  name: 'H5List',
  props: {
    list: null
  },
  data () {
    return {
      isShowPreView: false,
      itemId: null,
      picture: picture
    }
  },
  // mounted () {
  //   this.getH5List({})
  // },
  computed: {
    ...mapState({
      editorTheme: state => state.h5Editor.editorTheme,
      _itemId: state => state.h5Editor.editorTheme._id
    })
  },
  methods: {
    ...mapActions([
      'createTheme',
      'addPage',
      'saveTheme'
    ]),
    toEditor (item) {
      this.$emit('to-editor', item)
      // this.$store.dispatch('setEditorTheme', item)
      // this.$store.dispatch('setEditorPage', item.pages[0])
      // this.$router.replace({ path: '/h5editor', query: { itemId: item._id } })
    },
    deleteTheme (item) {
      this.$emit('delete-theme', item)
      // this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   this.$store.dispatch('deleteTheme', item)
      //   this.$message({
      //     type: 'success',
      //     message: '删除成功!'
      //   })
      // }).catch(() => {
      //   this.$message({
      //     type: 'info',
      //     message: '已取消删除'
      //   })
      // })
    },
    create () {
      this.createTheme('h5')
      this.addPage()
      let $this = this
      // this.saveTheme(tool.vue2json(this.editorTheme)).then(() => {
      //   this.$router.replace({ path: '/h5editor', query: { itemId: this._itemId } })
      // })
    },
    showPreView (item) {
      // this.$emit('show-preview', item)
      this.isShowPreView = true
      this.itemId = item.id
    },
    timeFormat (date) {
      const dateTime = new Date(date)
      const displayTime = `${dateTime.getFullYear()}-${dateTime.getMonth() + 1}-${dateTime.getDate()}`
      // //console.log(displayTime)
      return displayTime
    }
  },
  components: {
    // PreView
  }
}
</script>

<style lang="less" scoped>
  .my-themes {
    width: 100%;
    height: 100%;
    background-color: #f2f5f6;
  }

  .my-themes .container {
    width: 80%;
    margin: 0 auto;
    padding-top: 20px;
  }

  .my-themes .theme-list {
    overflow: hidden;
    list-style: none;
  }

  .theme-item {
    width: 230px;
    height: 328px;
    float: left;
    margin-right: 90px;
    margin-bottom: 30px;
    background: #fff;
  }

  .theme-item .thumb img {
    width: 100%;
    height: 230px;
  }
  .thumb {
    position: relative;
    .cover {
      display: none;
      position: absolute;
      background: #000;
      opacity: 0.5;
      width: 100%;
      height: 100%;
      top:0;
      .toolbar {
        color: #fff;
        text-align: right;
        cursor: pointer;
        padding: 10px;
        font-size: 18px;
        i {
          margin: 5px;
        }
      }
      .preview {
        text-align: center;
        margin-top:70px;
        span {
          border: 1px solid #fff;
          padding: 5px 10px;
          font-size: 20px;
          color: #fff;
          cursor: pointer;
        }
      }
    }
  }
  .thumb:hover {
    .cover {
      display: block;
    }
  }
  .theme-item .footer {
    height: 98px;
    padding: 10px;
    background-color: #fff;
    box-sizing: border-box;
    position: relative;
  }

  .theme-item .footer > .title {
    color: #4a4a4a;
    font-size: 14px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .theme-item .footer > .content {
    color: #83817b;
    margin-top: 12px;
    font-size: 14px;
    max-height: 40px;
    overflow: hidden;
    line-height: 1.5;
  }
  .footer .delete {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }

  .theme-item.create {
    text-align: center;
  }

  .theme-item.create .create-area p {
    font-size: 20px;
    cursor: pointer;
    margin-top: 100px;
  }
</style>
